<template>
    <div>
        <NoAuthPage v-showNoAuth="'G5-1'" />
        <div v-userAuth="'G5-1'">
            <div class="tips border-primary j-border-radius-sm bg-main-opaque pt-14 pb-14 pl-20 pr-20">
                <!-- <i class="icon icon-tips16f j-text-main"></i> -->
                <Iconfont class="icon table-operation-icon" type="a-16_f_ic_about"></Iconfont>
                {{ $t('当前 AD 域可用于 SMB 协议认证') }}
            </div>
            <a-button v-userAuth="'G5-2'" :disabled="dataList.length !== 0" style="margin-top: 16px;" type='primary' @click="handleCreate">
                <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                {{ $t('加入AD域') }}
            </a-button>

            <a-spin :spinning="loading">
                <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :dataSource='dataList'
                    :locale="defaultSetting" :pagination='pagination' size='small' :scroll="{ x: 1340 }">
                    <template slot="name" slot-scope="name, record">
                        <span style="color: #006DB8;cursor: pointer" @click="handleDetail(record)">{{ name }}</span>
                    </template>
                    <template slot="operate" slot-scope='text, record'>
                        <div style="display: flex;">
                            <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('域校验') }}</span>
                                </template>
                                <Iconfont class="icon table-operation-icon" type="icon-checkout16f"
                                    v-userAuth="'G5-6'"
                                    @click="handleCheck(record)"></Iconfont>
                            </a-tooltip>
                            <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('用户同步') }}</span>
                                </template>
                                <Iconfont class="icon table-operation-icon" type="icon-usersync16f"
                                    v-userAuth="'G5-5'"
                                    @click="handleSynchronize(record)"></Iconfont>
                            </a-tooltip>
                            <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('Edit') }}</span>
                                </template>
                                <Iconfont v-userAuth="'G5-4'" class="icon table-operation-icon" type="icon-edit16f" @click="handleEdit(record)">
                                </Iconfont>
                            </a-tooltip>
                            <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('Delete') }}</span>
                                </template>
                                <Iconfont class="icon table-operation-icon" type="icon-delete16f"
                                    v-userAuth="'G5-3'" 
                                    @click="handleDelete(record.name, record.id)"></Iconfont>
                            </a-tooltip>
                        </div>
                    </template>
                </a-table>
            </a-spin>

            <createAD ref="createAD" @get-list="getList" />
            <modifyAD ref="modifyAD" @get-list="getList" />
            <synchronizeDialog ref="synchronizeRef" @handle-checked="synchronizeCallback" />

        </div>
    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import createAD from './createAD.vue';
import modifyAD from './modifyAD.vue';
import synchronizeDialog from './synchronizeDialog.vue';
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: 'AD',
    components: { EmptyData, createAD, modifyAD, synchronizeDialog, NoAuthPage },
    data() {
        return {
            loading: false,
            dataList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('接入名称'), dataIndex: 'name', key: 'name', width: 160, fixed: 'left', scopedSlots: { customRender: 'name' } },
                { title: this.$t('域管域名'), dataIndex: 'domain_name', key: 'domain_name' },
                { title: 'NetBIOS', dataIndex: 'net_bois', key: 'net_bois' },
                { title: 'DNS IP', dataIndex: 'dns_ip', key: 'dns_ip' },
                { title: this.$t('Username'), dataIndex: 'user', key: "user" },
                { title: this.$t('最近同步时间'), dataIndex: 'sync_time', key: "sync_time", width: 250 },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 150, fixed: 'right' }
            ],
            synchronizeItem: {},
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.authentication.getAuthentication()
            this.dataList = data.ad_list
            this.loading = false
        },
        handleCreate() {
            this.$refs.createAD.isShow = true
        },
        handleEdit(item) {
            this.$refs.modifyAD.form = { ...item }
            this.$refs.modifyAD.isShow = true
        },
        handleDetail(item) {
            this.$router.push({ path: '/authenticationDetail', query: { id: item.id, name: item.name } })
        },
        async handleSynchronize(item) {
            this.$refs.synchronizeRef.isShow = true
            this.synchronizeItem = { ...item }
        },
        async synchronizeCallback(checked) {
            this.$refs.synchronizeRef.loading = true
            const item = this.synchronizeItem
            const { domain_name, dns_ip, user, passwd, net_bois } = item
            const { data } = await this.$api.authentication.synchronizeAuthentication({ domain_name, dns_ip, user, passwd, net_bois, delete: checked })
            this.model(data.id) //返回模板
            this.notice(data.id, data.params, data.flag) //通知列表显示
            if (data.flag == '0') {
                this.$router.push({ path: '/authenticationDetail', query: { id: item.id, name: item.name } })
            }
            this.$refs.synchronizeRef.loading = false
            this.$refs.synchronizeRef.isShow = false
        },
        async handleCheck(item) {
            this.loading = true
            let _this = this
            // const { domain_name, user, passwd, dns_ip, net_bois } = item
            this.$confirm({
                title: this.$t('域校验'),
                content: this.$t('域校验名为') + `${item.name}`,
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'primary',
                async onOk() {
                    const { data } = await _this.$api.authentication.checkAuthentication(item)
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        },
        async handleDelete(name, id) {
            this.loading = true
            let _this = this
            this.$confirm({
                title: this.$t('删除AD域'),
                content: this.$t('删除AD域名为') + `${name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.authentication.deleteAuthentication({ id, name })
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        }
    }
}
</script>